<template>
    <div class="foot-nav">
        <!-- 底部导航 -->
        <router-link to="/">
            <i><img src="../assets/img/homepage.svg"></i>                
            <span class="ftn-text">电影</span>
        </router-link>
        <router-link to="/video">  
            <i><img src="../assets/img/video.svg"></i>         
            <span class="ftn-text">视频</span>
        </router-link>
        <router-link to="/shortvideo">   
            <i><img src="../assets/img/shortvideo.svg"></i>   
            <span class="ftn-text">小视频</span>
        </router-link>
        <!-- <router-link to="/performance">  
            <i><img src="../assets/img/performance.svg"></i>   
            <span class="ftn-text">演出</span>
        </router-link> -->
        <router-link to="/mine">      
            <i><img src="../assets/img/mine.svg"></i>      
            <span class="ftn-text">我的</span>
        </router-link>
    </div>
</template>

<style lang="less" scoped>
.foot-nav{
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 3;
    background: white;
    border-top: 1px solid #d8d8d8;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .ftn-text{
        font-size: 12px;
    }
    &>a{
        // height: 100%;
        color: black;
        text-align: center;
        box-sizing: border-box;
        font-size: 12px;
        padding: 0 5px;
        position: relative;
        // 弹性布局
        display: flex;
        flex-direction: column;
        // 水平垂直居中
        justify-content: space-evenly;
        align-items: center;
        &.router-link-exact-active{
            color: #f03d37;
            text-align: center;
            box-sizing: border-box;
            position: relative;
        }
        &>i , i>img{
            width: 25px;
            height: 25px;
        }
    }
}
</style>